<style scoped lang="scss">
.app {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-container {
  width: 600px;
  height: 95%;
  overflow: hidden;
  background: #f8f8f8;
  /* border-radius: 10px; */
  margin-top: 28px;
}

.chat-room {
  height: calc(100% - 95px);
  /* padding: 10px; */
  box-sizing: border-box;
  overflow: auto;
  background: rgb(190, 242, 249);
  width: 100vw;
}

.message-item {
  width: 100%;
  margin: 0 auto;
  margin-bottom: 5px;
  padding: 10px 0;
}

.flex-left {
  display: flex;
  justify-content: flex-start;
  width: 100%;
}

.flex-right {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.avatar {
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: #fafafa;
  margin: 0 3px;

  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
}

.message-content {
  line-height: 28px;
  background: #fff;
  border-radius: 8px;
  padding: 5px 5px;
  margin-left: 5px;
  max-width: calc(100% - 100px);
  overflow-wrap: break-word;
}

.send-box {
  height: 60px;
  display: flex;
  align-items: center;
  background-color: pink;
  padding: 0 5px;
  position: fixed;
  bottom: 5px;
  width: 100%;
}

.message-input {
  height: 40px;
  flex: 1;
}

.send-btn {
  width: 60px;
  height: 40px;
  line-height: 40px;
  background-color: khaki;
  border: none;
  margin: 0 4px;
  border-radius: 15px;
  font-size: 16px;
}

.send-img {
  width: 50px;
  height: 50px;
  line-height: 50px;
  overflow: hidden;
  opacity: 0;
}


.icon {
  font-size: 25px !important;
  position: absolute;
  right: 20px;
}
</style>

<template>
  <div class="app">
    <div class="chat-container">
      <p style="line-height: 40px;"> 在线人数 {{ onlineList.length }}</p>
      <div class="chat-room">
        <div class="message-item" v-for="(item, index) in messageList" :key="index">
          <div class="flex-left" v-if="item.userId !== userInfo.userId">
            <div class="avatar">
              {{ "w" + item.userId }}
            </div>
            <div class="message-content" style="margin-right: 5px;"
              v-if="item.content.includes('png') || item.content.includes('jpg') || item.content.includes('jpeg') || item.content.includes('gif') || item.content.includes('webp')">
              <img :src="item.content" height="50" />
            </div>
            <div class="message-content" style="margin-right: 5px;" v-else-if="item.content.includes('mp4')">
              <video :src="item.content" controls width="100" height="50"></video>
            </div>
            <div class="message-content" style="margin-right: 5px;" v-else>
              {{ item.content }}
            </div>
          </div>
          <div class="flex-right" v-else>
            
              <div class="message-content" style="margin-right: 5px;"
                v-if="item.content.includes('png') || item.content.includes('jpg') || item.content.includes('jpeg') || item.content.includes('gif') || item.content.includes('webp')">

                <img :src="item.content" height="50" />
              </div>
              <div class="message-content" style="margin-right: 5px;" v-else-if="item.content.includes('mp4')">
                <video :src="item.content" controls width="100" height="50"></video>
              </div>
              <div class="message-content" style="margin-right: 5px;" v-else>
                {{ item.content }}
              </div>
              <div class="avatar">
                {{ "w" + item.userId }}
              </div>
            </div>
        
        </div>
        <div class="send-box">
          <div style="margin-right: 5px;">
            <V3Emoji @click-emoji="aa" />
          </div>
          <input type="text" class="message-input" v-model="yourMessage" @keyup.enter="sendMessage">
          <button class="send-btn" @click="sendMessage">发送</button>
          <van-icon class="icon" name="photo-o" />
          <input type="file" class="send-img" ref="image" @change="changeImage">
        </div>
      </div>
    </div>
    </div>

</template>

<script setup>
import { ref, onMounted } from 'vue'
import V3Emoji from 'vue3-emoji'
import 'vue3-emoji/dist/style.css'
import axios from 'axios'

const yourMessage = ref('')
const image = ref('')
const messageList = ref([])
const onlineList = ref([])
const userInfo = ref({
  userId: ''
})
let ws = null

const changeImage = async () => {
  const file = image.value.files[0]
  const formData = new FormData()
  formData.append('file', file)
  const res = await axios.post('/api/upload', formData)
  if (res.data.code == 200) {
    yourMessage.value = res.data.url
    sendMessage()
  }
}

const aa = (e) => {
  yourMessage.value += e
}

const sendMessage = () => {
  if (yourMessage.value) {
    ws.send(
      JSON.stringify({
        type: 'message',
        userId: userInfo.value.userId,
        content: yourMessage.value
      })
    )

    yourMessage.value = ''
  }
}

const initWebSocket = () => {
  ws = new WebSocket('ws://123.60.213.46:8887')
  console.log(ws)

  ws.onopen = () => {
    console.log('websocket连接成功')
    ws.send(
      JSON.stringify({
        type: 'init',
        userId: userInfo.value.userId,
        content: '欢迎来到子凡的狂欢派对'
      })
    )
  }

  ws.onerror = () => {
    console.log('websocket连接失败')
  }

  ws.onmessage = (data) => {
    const message = JSON.parse(data.data)
    switch (message.type) {
      case 'tips':
        console.log(message.content)
        break
      case 'message':
        messageList.value.push(message)
        break
      case 'onlineList':
        onlineList.value = message.list
        break
      default:
        break
    }
  }

  ws.close = () => {
    console.log('websocket连接关闭')
  }
}


onMounted(() => {
  userInfo.value.userId = new Date().getTime().toString().slice(8)
  initWebSocket()

})
</script>
